<template>
  <div class="banner">
    <div class="wrapper clearfix">
      <div class="movieInfo-left">
        <div class="avatar-shadow">
          <img class="avatar" :src="MovieInfo.mImage" alt="" />
          <div class="movie-ver"></div>
        </div>
      </div>
      <div class="movieInFo-middle clearfix">
        <div class="movie-brief-container">
          <h1 class="m_name">{{ MovieInfo.mName }}</h1>
          <ul>
            <li class="ellipsis" >
              <a class="text-link" v-for="(type,index) in MovieInfo.mType" :key="type.id" @click="toIndex(type.id)"> {{ type.name }} </a>
            </li>
            <li class="len ellipsis">
              中国大陆/{{ MovieInfo.mLength }}分钟
            </li>
            <li class="len ellipsis" id="m_date">
              {{ MovieInfo.mDate }}中国大陆上映
            </li>
            <li>
              <h3
                class="director"
                style="maring: 0; padding: 0; line-height: 20px"
              >
                导演：{{ MovieInfo.mDirector }}
              </h3>
              <p style="margin-left: 55px"></p>
            </li>
            <li>
              <h3
                class="actor"
                style="maring: 0; padding: 0; line-height: 20px"
              >
                演员：{{ MovieInfo.mActor }}
              </h3>
              <p style="margin-bottom: -30px; margin-left: 55px"></p>
            </li>
          </ul>
        </div>
        <div class="action-buyBtn">
          <div class="action clearfix">
            <a class="wish" :class="BeLiked ? 'active' : ''" @click="collect">
              <div>
                <i class="icon wish-icon"></i>
                <span class="wish-msg wish">{{ myLikeTxt }}</span>
              </div>
            </a>
            <a
              class="score-but"
              :class="rate"
              @click="dialogFormVisible = true"
            >
              <div>
                <i class="icon score-btn-icon"></i>
                <span class="wish-msg">{{myRateTxt}}</span>
              </div>
            </a>
          </div>
          <el-dialog title="评价" :visible.sync="dialogFormVisible" @closed="closeDialog">
            <el-form :model="Comment">
              <el-form-item label="电影评分" :label-width="formLabelWidth">
                <el-rate v-model="Comment.score" :allow-half="true" show-text :texts="texts">
                </el-rate>
              </el-form-item>
              <el-form-item label="电影评价" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :rows="5"
                  v-model="Comment.eva"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="insertComment"
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <a class="btn buy" v-if="buy" @click="BuyTicket"> 购票 </a>
          <a class="btn buy" @click="ToDetail" v-else>查看更多电影详情</a>
        </div>
      </div>
      <div class="movie-stats-container">
        <div class="movie-index">
          <p class="movie-index-title">电影评分</p>
          <div class="score" v-if="(score !== 0)">
            <span class="index-left info-num" id="score">
              {{ score * 2 }}
            </span>
            <div class="index-right">
              <span class="score-num">
                <span class="stonefont"
                  ><el-rate
                    v-model="MovieInfo.mScore"
                    disabled
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate
                ></span>
              </span>
              <span class="score-num"
                ><span class="stonefont">{{ commentLen }}</span
                >人评分</span
              >
            </div>
          </div>
          <div v-else class="movie-index-content score normal-score">
              <span class="index-left no-info">暂无</span>
          </div>
        </div>
        <div class="movie-index">
          <p class="movie-index-title">累计票房</p>
          <div class="movie-index-content box">
            <span v-if="mBoxoffice" class="index-left no-info">暂无</span>
            <span v-else class="stonefont">{{ mBoxoffice.totalAmount }}</span>
            <span class="unit">{{ mBoxoffice.unit }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { numberFormat } from '@/utils'
import { getCommentByMId, insertComment } from '@/api/comment'
export default {
  name: 'VueIndex',
  props: ['mId', 'buy'],
  data () {
    return {
      hasRate: false, // 是否评分
      dialogFormVisible: false,
      Comment: {
        id: null,
        score: 0,
        eva: '',
        mid: this.mId
      },
      texts: ['超烂啊', '比较差', '一般般', '比较好', '棒极了'],
      // 通过map根据评分划定评分等级
      rateMap: {
        1: '超烂啊',
        2: '超烂啊',
        3: '比较差',
        4: '比较差',
        5: '一般般',
        6: '一般般',
        7: '比较好',
        8: '比较好',
        9: '棒极了',
        10: '棒极了'
      },
      comm: {},
      formLabelWidth: '90px'
    }
  },
  computed: {
    ...mapState('detail', ['MovieInfo', 'BeLiked', 'comment', 'commentLen']),
    rate () {
      return this.hasRate ? 'active' : ''
    },
    ratetxt () {
      if (this.hasRate) {
        return '评分'
      } else {
        return this.Comment.score
      }
    },
    mBoxoffice () {
      return numberFormat(this.MovieInfo.mBoxOffice)
    },
    score () {
      return parseInt(this.MovieInfo.mScore * 10) / 10
    },
    myLikeTxt () {
      return this.BeLiked ? '已想看' : '想看'
    },
    myRateTxt () {
      return !this.hasRate ? '评分' : this.comm.score * 2 + '分,' + this.rateMap[this.comm.score * 2]
    }
  },

  async mounted () {
    this.$store.dispatch('detail/getMovieInfo', this.mId)
    this.$store.dispatch('detail/getBeLiked', this.mId)
    this.$store.dispatch('detail/getScoreLen', this.mId)
    const result = await getCommentByMId(this.mId)
    if (result.data !== null) {
      this.comm = result.data
      this.Comment.id = this.comm.id
      this.Comment.score = this.comm.score
      this.Comment.eva = this.comm.eva
      this.hasRate = true
    }
    this.$bus.$on('update:dialogFormVisible', data => {
      this.dialogFormVisible = data
    })
    console.log(this.MovieInfo.mBoxOffice.totalAmount === '0.000')
  },

  methods: {
    // 收藏
    collect () {
      if (this.BeLiked) {
        this.$store.dispatch('detail/NotLike', this.mId)
      } else {
        this.$store.dispatch('detail/BeLike', this.mId)
      }
    },
    closeDialog () {
      this.Comment.id = this.comm.id
      this.Comment.score = this.comm.score
      this.Comment.eva = this.comm.eva
    },
    // 购票
    BuyTicket () {
      this.$router.push({ name: 'plan', query: { movieId: this.mId } })
    },
    ToDetail () {
      this.$router.push({ name: 'toDetail', params: { id: this.mId } })
    },
    async insertComment () {
      this.dialogFormVisible = false
      const result = await insertComment(this.Comment)
      if (result.data === 1) {
        this.comm.score = this.Comment.score
        this.comm.eva = this.Comment.eva
      }
    },
    toIndex (id) {
      this.$router.push({ name: 'film', params: id })
    }
  }
}
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  min-width: 1200px;
  background: #392f59 url(@/assets/info_bg.png) no-repeat 50%;
}

.banner .wrapper {
  width: 1200px;
  margin: 0 auto;
  height: 385px;
  position: relative;
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}

.banner .wrapper .movieInfo-left {
  width: 300px;
  float: left;
  position: relative;
  top: 70px;
  overflow: hidden;
  z-index: 9;
}

.movieInfo-left .avatar-shadow,
.cinema-left .avatar-shadow {
  position: relative;
  margin: 0 30px;
  width: 240px;
  height: 330px;
  padding-bottom: 40px;
  background: url(@/assets/info_bg.png) no-repeat bottom;
}

.movieInfo-left .avatar-shadow .avatar {
  border: 4px solid #fff;
  height: 322px;
  width: 232px;
}

.movie-ver {
  position: absolute;
  top: 4px;
  left: -2px;
  font-size: 12px;
  color: #fff;
}

.banner .wrapper .movieInFo-middle {
  position: relative;
  margin-right: 30px;
  margin-left: 300px;
  margin-top: 40px;
}

.clearfix:after {
  clear: both;
}

.movie-brief-container {
  position: absolute;
  color: #fff;
  font-size: 14px;
  z-index: 1;
}

.btn {
  display: inline-block;
  padding: 2px 15px;
  line-height: 25px;
  font-size: 15px;
  color: #fff;
  background-color: #df2d2d;
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}

.movie-brief-container .m_name {
  width: 900px;
  margin-top: 0;
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 64px;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h1,
h2,
h3 {
  font-weight: 400;
}

.banner li,
.banner p,
.banner ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
}

.movie-brief-container ul {
  width: 250px;
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.movie-brief-container ul li {
  margin: 12px 0;
  line-height: 100%;
}

.movie-brief-container a.text-link {
  color: inherit;
  // display: inline-block;
  cursor: pointer;
}

a {
  text-decoration: none;
}

.action-buyBtn {
  position: absolute;
  bottom: -10px;
}
.action-buyBtn .action .wish.active i.wish-icon {
  background: url();
}

.action-buyBtn .action .wish i.wish-icon {
  background: url();
}

div {
  display: block;
}
.action-buyBtn .action a {
  cursor: pointer;
  float: left;
  display: block;
  width: 120px;
  height: 25px;
  background-color: #756189;
  margin-right: 10px;
  padding-top: 11px;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
  border-radius: 2px;
}

.action-buyBtn .action i.icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
  margin-right: 5px;
  width: 16px;
  height: 16px;
}
.action-buyBtn .action .score-but i.score-btn-icon {
  background: url();
}
.action-buyBtn .action .score-but.active i.score-btn-icon {
  background: url();
}

.action-buyBtn .btn.buy {
  cursor: pointer;
  margin-top: 10px;
  width: 250px;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  border-radius: 2px;
  padding: 0;
}

.movie-stats-container {
  position: absolute;
  top: 158px;
  left: 648px;
}

::v-deep .el-dialog {
  width: 36%;
}

.movie-stats-container .movie-index {
  margin-bottom: 16px;
  color: #fff;
  margin-left: 250px;
}
.movie-stats-container .movie-index .movie-index-title {
  font-size: 12px;
  margin-bottom: 8px;
}

.movie-stats-container .movie-index .score {
  overflow: hidden;
}

.movie-stats-container .movie-index .score .index-left {
  float: left;
}

.movie-stats-container .movie-index .score .info-num {
  font-size: 30px;
  color: #ffc600;
  height: 30px;
  line-height: 30px;
}

.movie-stats-container .movie-index .score .index-right {
  margin-left: 54px;
  font-size: 12px;
}
.movie-stats-container
  .movie-index
  .score
  .index-right
  ::v-deep
  .el-rate__item {
  font-size: 0;
  vertical-align: middle;
  margin-right: -9px;
}
.movie-stats-container .movie-index .movie-index-content .no-info {
    display: inline-block;
    font-size: 24px;
    color: #9c87b8;
    color: hsla(0,0%,100%,.4);
}
.stonefont {
  font-family: mtsi-font;
}

.movie-stats-container .movie-index .movie-index-content {
  overflow: hidden;
}

.movie-stats-container .movie-index .box .stonefont {
  font-size: 30px;
}

.movie-stats-container .movie-index .box .unit {
  font-size: 12px;
  padding-left: 4px;
}

.main-content-container > div.main-content {
  width: 730px;
  float: left;
}
</style>
